<script setup lang="ts">
import { isTgEnv } from '~/utils';

type TInfo = Api.GetDataItem<typeof apis.apiInviteUsers>;

defineProps<{
  info: TInfo;
}>();
defineEmits<{
  setCommission: [userId: string];
}>();
</script>

<template>
  <div class="b-b-(1 sys-layer-d solid) py-4 text-sm">
    <!-- 头部 -->
    <div class="grid grid-cols-[auto_1fr] mb-4 gap-x-2 gap-y-1">
      <TAvatar
        class="row-span-2 w-10 cursor-pointer self-center hover:op-70"
        :avatar="info.avatar" :level="info.level" :levelScale="0.24"
        @click="globalPopups.userProfile.open({ userId: info.uid })"
      />
      <div class="cursor-pointer hover:op-70" @click="$emit('setCommission', info.uid)">
        <span>{{ info.nickname }}</span>
        <i class="i-ri:edit-2-fill ml-1 text-1.2em" />
      </div>
      <div class="text-xs text-sys-text-body">
        {{ $d(info.reg_time, 'full') }}
      </div>
    </div>

    <!-- 统计信息 -->
    <ul class="list-none p-0 *:my-2 -mb-2 *:flex-between">
      <li>
        <span class="text-sys-text-body">{{ $t('t6EaBaE5rr17Spu0w8gB') }}</span>
        <TAmount :value="info.profit_amount" symbol="$" iconPos="left" format="pad-dec" />
      </li>
      <li>
        <span class="text-sys-text-body">{{ $t('w3O2NhWdM90mb0cIl6MRu') }}</span>
        <TAmount :value="info.deposit_amount" symbol="$" iconPos="left" format="pad-dec" />
      </li>
      <li>
        <span class="text-sys-text-body">{{ $t('jWvz6lhymri4YcEpYyAAq') }}</span>
        <TAmount :value="info.bet_amount" symbol="$" iconPos="left" format="pad-dec" />
      </li>
      <li>
        <span class="text-sys-text-body">{{ $t('nUj0W3DPxcotAmoLfyk') }}</span>
        <div class="ml-auto">
          <div class="flex justify-end gap-1">
            <span v-if="!envs.isTg">Tg：</span>{{ desensitize(info.parent_channel_telegram_invite_url, 10) }}
            <TCopy :source="info.parent_channel_telegram_invite_url" :nthParent="1" />
          </div>
          <div v-if="!envs.isTg" class="flex justify-end gap-1">
            <span>Web：{{ desensitize(info.parent_channel_web_invite_url, 10) }}</span>
            <TCopy :source="info.parent_channel_web_invite_url" :nthParent="1" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
